<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
     备忘录:
      1.  添加备忘录
      2. 删除备忘录
      3. 清空备忘录
      4. 备忘录列表展示
      5. 备忘录总条数
      6. 在清空备忘录后 展示没有备忘录请添加提示信息
-->

<div id="app">
    <p><input type="text" placeholder="请输入备忘录" v-model="msg"><button @click="addMessage">添加</button></p>
<!--    备忘录列表展示-->
    <h3>{{title}}</h3>
    <ul>
        <li v-for="(message,index) in messages">{{message}} <button @click="del(index)">删除</button></li>
    </ul>
    <p v-if="messages.length==0">没有备忘录,请添加</p>
    <p><button @click="clear">清空备忘录</button></p>
    <p>备忘录共有 {{messages.length}} 条</p>

</div>

<script >

    let vm = new Vue({
        el:'#app',
        data:{
            msg:'',
            title:"备忘录列表",
            messages:['备忘录1','备忘录2']
        },
        methods:{
            addMessage(){
                // 判定备忘录信息不能为空
                if (this.msg.trim().length==0){
                    alert("请填写备忘录")
                    this.msg = ''
                    return
                }
                //  将表单中的数据  添加到数组中
               this.messages.push(this.msg)
                // 清空表单
                this.msg = ''
            },
            clear(){
                this.messages = []
            },
            del(index){
                this.messages.splice(index,1)
            }
        }
      })
</script>

</body>
</html>